/*
 * @description 全局样式在此设置
 */
@charset "utf-8";

@import './normalize.scss';
@import './transition.scss';

$base: '.vab';

@mixin scrollbar {
  max-height: 88vh;
  margin-bottom: 0.5vh;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.3);
  }
}

@mixin base-scrollbar {
  &::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 7px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-track:hover {
    background-color: #f8fafc;
  }
}

//文字显示几排
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.cu{
  cursor: pointer;
}
.fl{
  float: left;
}
.fr{
  float:right;
}
.clearfix::after{
  display: block;
  content: '';
  clear: both;
}
.ellipsis2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ellipsis3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}

img {
  object-fit: cover;
}

a {
  color: $base-color-blue;
  text-decoration: none;
  cursor: pointer;
}

html {
  body {
    position: relative;
    height: 100vh;
    padding: 0;
    margin: 0;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: $base-font-size-default;
    color: #2c3e50;
    background: #f6f8f9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    @include base-scrollbar;

    div {
      @include base-scrollbar;
    }

    svg,
    i {
      &:hover {
        opacity: 0.8;
      }
    }

    /* el-tag开始 */
    .el-tag + .el-tag {
      margin-left: 10px;
    }

    /* el-tag结束 */

    /* markdown编辑器开始 */
    .editor-toolbar {
      .no-mobile,
      .fa-question-circle {
        display: none;
      }
    }

    /* markdown编辑器结束 */

    /* 间隔线开始 */
    .el-divider--horizontal {
      margin: 10px 0 25px 0;

      .el-divider__text {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }

    #vue-wjjk .el-menu-vertical-demo .showtitle.is-active>div{
        span{
          &::before{
            position: absolute;
        content: "";
        left: 0;
        top: 7px;
        bottom: 7px;
        width: 4px;
        background-color: #4c68ef;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
          }
        }
    }
    #vue-wjjk .el-menu-vertical-demo .showtitle.is-active .onlyrouter{

        &::before{
          position: absolute;
      content: "";
      left: 0;
      top: 7px;
      bottom: 7px;
      width: 4px;
      background-color: #4c68ef;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
        }

  }


    #vue-wjjk .el-submenu__title.is-active::before{
      position: absolute;
        content: "";
        left: 0;
        top: 7px;
        bottom: 7px;
        width: 4px;
        background-color: #4c68ef;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }



    .el-menu--popup-right-start>.el-menu-item>span{
      &::before{
        display: none !important;
      }
    }

    #vue-wjjk .showtitle.is-active>ul>li>span{
      &::before{
        display: none;
      }
    }



    /* 间隔线结束 */

    /* 大图展示开始 */
    .el-image-viewer {
      &__close {
        .el-icon-circle-close {
          color: $base-color-white;
        }
      }
    }

    /* 大图展示结束 */

    .vue-admin-beautiful-wrapper {
      .app-main-container {
        @include base-scrollbar;

        > [class*='-container'] {
          padding: $base-padding;
          background: $base-color-white;
        }
      }
    }

    /* 进度条开始 */
    #nprogress {
      position: fixed;
      z-index: $base-z-index;

      .bar {
        background: $base-color-blue !important;
      }

      .peg {
        box-shadow: 0 0 10px $base-color-blue, 0 0 5px $base-color-blue !important;
      }
    }

    /* 进度条结束 */

    /* 表格开始 */

    .el-table {
      .has-gutter{
        th {
          position: relative;
          box-sizing: border-box;
          padding: 10px 0;
          .cell {
            font-size: $base-font-size-default;
            font-weight: bold;
            color: #212121;
          }
        }
      }
      .el-table__body-wrapper {
        @include base-scrollbar;
      }

      th {
        background: #f5f7fa;
      }

      td,
      th {
        position: relative;
        box-sizing: border-box;
        padding: 10px 0;
        .cell {
          font-size: $base-font-size-default;
          font-weight: normal;
          color: #666;

          .el-image {
            width: 50px;
            height: 50px;
            border-radius: $base-border-radius;
          }
        }
      }
    }

    /* 表格结束 */

    /* 分页开始 */
    .el-pagination {
      padding: 2px 5px;
      margin: 15px 0 0 0;
      font-weight: normal;
      color: $base-color-black;
      text-align: center;
    }

    /* 分页结束 */

    /* 菜单开始 */
    .el-menu.el-menu--popup.el-menu--popup-right-start {
      @include scrollbar;
    }

    .el-menu.el-menu--popup.el-menu--popup-bottom-start {
      @include scrollbar;
    }

    .el-submenu__title i {
      color: #909399;
      margin-right: 10px;
    }


    /* 菜单结束 */

    /* 弹窗开始 */

    .el-dialog,
    .el-message-box {
      &__body {
        border-top: 1px solid $base-border-color;

        .el-form {
          padding-right: 30px;
        }
      }

      &__footer {
        padding: $base-padding;
        text-align: right;
        border-top: 1px solid $base-border-color;
      }

      &__content {
        padding: 20px 20px 20px 20px;
      }
    }

    /* 弹窗结束 */

    /* 卡片开始 */
    .el-card {
      margin-bottom: 15px;

      &__body {
        padding: $base-padding;
      }
    }

    /* 卡片结束 */
    /* 下拉树样式-----------开始 */
    .select-tree-popper {
      .el-scrollbar {
        .el-scrollbar__view {
          .el-select-dropdown__item {
            height: auto;
            max-height: 274px;
            padding: 0;
            overflow-y: auto;
            line-height: 26px;
          }
        }
      }
    }

    /* 下拉树样式-----------结束 */
  }
}

.login-content-box .el-tabs__nav{
  border-bottom: 1px solid #f3f6fe !important;
  font-size: 20px;
}
.login-content-box .el-tabs__item{
  font-size: 20px;
  padding-bottom: 0 20px 15px 20px !important;
  margin-bottom: 8px;
}
.login-content-box .el-tabs__item.activeon{
  font-weight: bold;
}
.login-content-box .el-input--small .el-input__inner{
  height: 40px !important;
  font-weight: normal;
}
.login-content-box .el-tabs__item.is-active{
  font-weight: bold !important;
}

.login-content-box .el-button--small{
  padding: 13px 15px !important;
  // margin-left: 8px;
}
.phoneCodebox .el-input{
  width: 60% !important;
}
.phoneCodebox .el-form-item__content{
  justify-content: space-between;
  display: flex;
}
.el-button--small{
  padding: 9px 24px;
}

#login .el-dialog__title{
  font-weight: bold;
}
.el-dialog__body{
  padding: 25px 20px !important;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}
.drivinginfo .el-input-group__append, .el-input-group__prepend{
  background-color: #fff;
  color: #4c68ef;
}
.el-form-item--small .el-form-item__error{
  padding-top: 7px;
}
#enterinfo .el-row{
  margin-top: 10px;
}
.el-dialog__title{
  font-weight: bold !important;
}
.formDialogcontent .el-form-item{
  margin: 5px 0 20px 0;
}
.el-table th{
  font-weight: bold !important;
}

.formarea  .el-input-group__append, .el-input-group__prepend{
  background-color: #fff;
  color: #4c68ef;
}

//表格内图片
.tableimg{
  width: 50px;
  height: 30px;
  cursor: zoom-in;
}

.el-message{
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  // box-shadow: 0 0 15px #f5f5f5;
}

.el-textarea .el-textarea__inner{ // 然后找到对应的类名，在这里将拉伸去掉即可
  resize: none;

}

  .el-form-item{
    margin-bottom: 20px !important;
  }
  .uploadimg {
    .el-form-item__error{
      padding-top: 52px !important;
    }
  }
  .el-menu--inline li{
    width: 78%;
    margin: 0 auto;
    border-radius: 4px;
  }

  .is-opened .el-menu-item.is-active{
    background: #677bff!important;
    color: #fff!important;
    border-radius: 4px;
    width: 78%;
    margin: 0 auto;
  }
  .classformarea .el-input-group__append, .el-input-group__prepend{
    // background-color: #fff;
    color: #333 !important;
  }
  .imgDetail .el-upload>div>div{
    width: 300px !important;
    height: 74px !important;
    line-height: 32px !important;
    position: relative;
  }
  .imgDetail .el-upload--picture-card{
    position: relative;
    left: 7px;
  }
  .el-upload--picture-card i{
    font-size: 22px;
  }
  .el-dialog__headerbtn{
    top: 9px !important;
  }
  .uploadimgarea .el-form-item__error{
    padding-top: 57px !important;
  }
  .el-tag.el-tag--info{
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #map .amap-maptype-list{
    display: none !important;
  }


  //蓝色标签
  .tagclass{
    background: #f2f6ff;
    border-radius: 2px;
    color: #5288ff;
    padding: 3px 6px;
    font-size: 14px;
    margin-right: 8px;
  }
  .showCode{
    position: absolute;
    top: 32px;
    color: red;
    left: 120px;
    font-size: 12px;
  }

  .fxclass{
    display: flex;
    justify-content: center;
  }

  //导航滚动条
  .el-menu-vertical-demo{
    padding-bottom: 70px;
  }

  .el-menu--popup{
    padding: 10px;
    z-index: 99999;
  }


//状态颜色值

.primary-color{
  color: #4c68ef;

}
// 进行中
.underway{
  color: #ff851a;

}
//已完成
.success-ok{
  color: #2fc0f2;
}
//已生效
.became-ok{
  color: #67C23a;
}
//待修改
.await-edit{
  color:#ff6259;
}
.disable-color{
  color: #ccc;
   cursor: not-allowed;
   margin: 0 5px;
}
.danger-color{
  color: #F56C6C;
}
.linkmar{
  margin: 0 5px;
}
//文字禁止点击
.disabletext{
  color: #ccc;
  margin: 0 10px;
  cursor: not-allowed;
}
.el-link{
  margin: 0 5px;
}
.el-link.el-link--primary.is-disabled{
  color: #ccc;
}
#initiate .el-tabs--card > .el-tabs__header{
  border-bottom: none;
 
}
#initiate .el-tabs__item{
  border-bottom: 1px solid #dfe4ed;
}
#initiate  .el-tabs__header{
  left: 0;margin: 0;
}
#initiate .el-tabs--card > .el-tabs__header .el-tabs__item.is-active{
  border-bottom: 1px solid #dfe4ed;

}
#initiate .el-tabs__item.is-active{
  color: #fff;
  background-color: $base-color-default;
}
#initiate .el-tabs__nav{
  border-radius: 5px !important;
  overflow: hidden;
  left: 50%;
  margin-left: -200px;
}
#initiate .el-tabs__item{
  height: 33px;
  line-height: 33px;
  font-size: 14px;
}
input[type=number] {

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
      -webkit-appearance: none;
  }

  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.edittext {
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.app-main-container{
  min-width: 1200px;
  overflow-x: auto;
}
.more-container{
  background-color: #fff;
}
.rightbtn{display: flex;}
.el-notification {white-space:pre-wrap !important; }